<template>
	<view class="father">
		<view class="fixAuto  middle" :class="{'bb':showBb}">
			<view :style="{width : titleWidth + 'rpx'}" v-if="title">
				{{title}}
			</view>
			<view>
				
				<textarea type="text" 
					:auto-height="true"
					:focus="focus"
					:disabled="disabled" 
					:value="valueSync" 
					:placeholder="_place" 
					:cursor-spacing="100"
					@input="_changeValue"
					@focus="onFocus"
					@blur="onBlur"/>
				
			</view>
		</view>

		<view class="grayBg pb10 slideDown " v-if="list.length > 0 && showList">
				
			<view class="whiteBg flex lt ptb10 pr10 pb5" :style="{ 'padding-left' : paddingLeft + 'rpx'}" style="flex-wrap: wrap;">
				
				<view class="tagGroup rds23 mlr5 mb5"
						v-for="( item , index) in list" :key="index">
						
					<view class="plr10 tag" hover-class="op9"
						@tap="_choose(item)">
						<view class="fz14">
							{{item}}
						</view>
					</view>
					
				</view>
				
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		name:"inps",
		props:{
			title : String ,
			disabled : Boolean ,
			showBb : {
				type : Boolean ,
				default : true 
			} ,
			multi : Boolean ,
			name : String ,
			value : {
				type : String,
				default : ""
			},
			placeholder : String ,
			titleWidth : {
				type : [String , Number] ,
				default : 200
			},
			paddingLeft : {
				type : [String , Number] ,
				default : 20
			},
			list : {
				type : Array ,
				default(){
					return [] ;
				}
			}
		},
		data() {
			return {
				focus : false ,
				showList : false ,
				valueSync : '' ,
				timeOut : null 
			};
		},
		watch:{
			value : {
				handler(){
					this.valueSync = this.value || '';
				},
				immediate : true 
			}
		},
		computed:{
			_place(){
				return !this.placeholder && !!this.title ? `请输入${this.title}` : this.placeholder ;
			}
		},
		methods:{
			_changeValue(e){
				this.valueSync = e.detail.value ;
				this.$emit("input" , this.valueSync) ;
			},
			onFocus(){
				this.focus = true ;
				this.showList = true ;
			},
			onBlur(){
				this.focus = false ;
				this.timeOut = setTimeout(e => {
					this.showList = false ;
				}, 200);
			},
			_choose(item){
				clearTimeout(this.timeOut)
				this.focus = true ;
				if (!this.multi || !this.valueSync) {
					this.valueSync = item ;
				}else{
					if (this.valueSync.indexOf(item) == -1) {
						this.valueSync = this.valueSync + "、" + item 
					}
				}
				this.$emit("input" , this.valueSync) ;
			}
		}
	}
</script>

<style lang="scss">
@keyframes slideDown {
	from{
		transform : scaleY(0);
	}
	to{
		transform : scaleY(1);
	}
}

.slideDown{
	animation-duration: 0.2s;
	animation-fill-mode: both;
	transform-origin: 0 0;
	animation-name: slideDown;
}
</style>
